import React, { Component } from 'react';
import { CSSTransition } from "react-transition-group";
import { actionCreators } from './store'
//如果使用*引入export模块，不用加入大括号
import {
    HeaderWrapper,
    W1200,
    Logo,
    Nav,
    Navitem,
    NavSearch,
    Addition,
    Button,
    Icon,
    Aa,
    SearchWrapper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoItem
} from './style'
import { connect } from 'react-redux'
class Header extends Component {
    getListArea = () => {
        const { list, focuesd, page, totalPage, mousIn, handleMouseEnter, headleMouseLeave, handleChangePage } = this.props;
        const jsList = list.toJS();
        const pageList = [];
        if (jsList.length) {
            for (let i = page * 10; i < (page + 1) * 10; i++) {
                if (jsList[i] !== undefined) {
                    pageList.push(
                        <SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>
                    )
                }
            }
        }
        if (focuesd || mousIn) {
            return (
                <SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={headleMouseLeave} >
                    <SearchInfoTitle ref={(i) => {
                        console.log(i)
                        this.a = i
                    }}>热门搜索 <SearchInfoSwitch onClick={() => { handleChangePage(page, totalPage, this.a, this) }}>
                            <i className="iconfont spin" >&#xe851;</i>
                            换一批</SearchInfoSwitch></SearchInfoTitle>
                    <div style={{ overflow: 'hidden' }}>
                        {
                            pageList
                        }
                    </div>
                </SearchInfo>
            )
        } else {
            return null
        }
    }
    render() {
        return (
            <HeaderWrapper>
                <W1200>
                    <Logo></Logo>
                    <Nav>
                        <Navitem className="left active">首页</Navitem>
                        <Navitem className="left">下载APP</Navitem>
                        <Navitem className="right">登录</Navitem>
                        <Navitem className="right"><Aa className="iconfont">&#xe636;</Aa></Navitem>
                        < SearchWrapper>
                            <CSSTransition timeout={200} in={this.props.focuesd} classNames="slide">
                                <NavSearch className={this.props.focuesd ? 'focuesd' : ''} onFocus={(list) => { this.props.head(list) }}
                                    onBlur={this.props.inputOnBlur}
                                ></NavSearch>
                            </CSSTransition>
                            <i className={this.props.focuesd ? 'focuesd iconfont zoom' : 'iconfont zoom'} >&#xe64d;</i>
                            {this.getListArea()}
                        </SearchWrapper>
                        <Addition>
                            <Button className="ret"><Icon className="iconfont">&#xe61b;</Icon>写文章</Button>
                            <Button className="reg">注册</Button>
                        </Addition>
                    </Nav>
                </W1200>
            </HeaderWrapper>
        );
    }
}
// console.log(actionCreators)
const mapStateToProps = (state) => {
    // console.log(state)
    return {
        //focuesd: state.get('header').get('focuesd'),
        //别的写法
        focuesd: state.getIn(['header', 'focuesd']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage']),
        mousIn: state.getIn(['header', 'mousIn'])
    }
}
const mapDispathToPropos = (dispath) => {
    return {
        head(list) {
            dispath(actionCreators.getList());
            dispath(actionCreators.searchFocus());
        },
        inputOnBlur() {
            dispath(actionCreators.searchBlurd());
        },
        handleMouseEnter() {
            dispath(actionCreators.mouseEnter());

        },
        headleMouseLeave() {
            dispath(actionCreators.MouseLeave());
        },
        handleChangePage(page, totalPage, a, b) {
            console.log(a, b)
            if (page < totalPage - 1) {
                dispath(actionCreators.ChangePage(page + 1));
            } else {
                dispath(actionCreators.ChangePage(0));
            }

        }
    }
}
export default connect(mapStateToProps, mapDispathToPropos)(Header)